<!DOCTYPE html>
<html>
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            * {margin:0; padding:0}
            img {border:0 none}
            .grid {
                width:50%;
                border:1px solid #efefef;
                border-collapse:collapse;
                margin:0 auto;
                text-align:center
            }

            .over {
                background-color: #d6d6d6
            }
        </style>
        <script src = 'script/jquery-1.12.4.min.js'></script>
        <script>
            //定义数据
            var students = [
                {name: "张三", sex: 0, age: "21", img: "../img/ad1.jpg"},
                {name: "李四", sex: 1, age: "22", img: "../img/ad2.jpg"},
                {name: "王五", sex: 0, age: "23", img: "../img/ad3.jpg"},
                {name: "赵六", sex: 1, age: "24", img: "../img/ad4.jpg"}
            ];

            jQuery(function($) {
                //body的jq对象
                var $body = $('body');

                //表标题
                $('<p></p>').appendTo($body).css({textAlign:'center', margin:'10px auto'}).text('花名册');

                //表格
                var $table = $('<table class = "grid" border = 1></table>').appendTo($body);

                //表格头
                var $tr = $('<tr></tr>').appendTo($table).css({backgroundColor:'#C9C9C9'});
                $('<th></th>').appendTo($tr).html('<input id = "chkAll" type = "checkbox" />').css({width:'10%'});
                $('<th></th>').appendTo($tr).text('姓名').css({width:'45%'});
                $('<th></th>').appendTo($tr).text('性别').css({width:'15%'});
                $('<th></th>').appendTo($tr).text('年龄').css({width:'15%'});
                $('<th></th>').appendTo($tr).text('照片').css({width:'15%'});

                //表格内容
                for (var i = 0; i < students.length; i++) {
                    var _tr = $('<tr></tr>').appendTo($table);
                    $('<td></td>').appendTo(_tr).html('<input type = "checkbox" />');
                    $('<td></td>').appendTo(_tr).text(students[i]['name']);
                    $('<td></td>').appendTo(_tr).text((0 === students[i]['sex']) ? '女' : '男');
                    $('<td></td>').appendTo(_tr).text(students[i]['age']);
                    $('<td></td>').appendTo(_tr).html('<a target = "_blank" href = "' + students[i]['img'] + '">查看</a>');
                }

                //鼠标样式
                var tr_all = $('tr:gt(0)', $table);
                tr_all.mouseover(function() {
                    tr_all.removeClass('over');
                    $(this).addClass('over');
                });

                //全选功能
                $('#chkAll').click(function() {
                    $(':checkbox:gt(0)').prop({checked:this.checked});
                });
            });
        </script>
    </head>

    <body>
    </body>
</html>